<!-- Created by mhy on 2018/6/27.

 -->
<style scoped lang="scss">
    .frame-index{
        position: relative;
        width: 100%; overflow: hidden;
        background:#F2F2F2;
    }
    .u-wrap{
        position: relative;
        display: flex;
        margin: 70px auto 0 auto;
        min-width: 1200px;
    }

    .u-detail{
        position: relative;
        flex: 1;
        background: #fff;
    }

    .u-vip-box{
        position: relative;
        width: 30%;
    }

    .u-header{
        height: 94px;
        position: relative;
        border-bottom: 2px solid rgba(151, 151, 151, 1);
    }

    .u-name{
        position: absolute;
        left: 50px; top: 36px;
        height:40px;
        font-size:28px;
        color:rgba(48,54,65,1);
        line-height:40px;
    }

    .u-btn{
        position: absolute;
        width:80px;
        height:37px;
        top: 33px; right: 50px;
        background:rgba(255,82,62,1);
        border-radius:5px;
        color: #fff;
        font-size:12px;
        text-align: center;
        line-height: 37px;
    }

    .u-body{
        position: relative;
        width: 100%;
        box-sizing: border-box;
        padding: 0 50px;
        min-width: 750px;
        overflow: hidden;
        padding-bottom: 356px;
    }

    .u-block{
        position: relative;
        height: 106px;
        border-bottom: 1px solid #E5E5E5;
    }

    .u-regist{
        position: absolute;
        left: 0; top: 50px;
        height: 37px; line-height: 37px;
        color: #303641;
        font-size: 26px;
    }

    .u-red{
        color: #FF523E;
    }

    button{
        cursor: pointer;
    }

    .u-item-block{
        position: relative;
        height: 129px;
        font-size: 16px;
        border-bottom: 1px solid #E5E5E5;
    }

    .u-item-label{
        position: absolute;
        left: 0; top: 30px;
    }

    .u-item-text{
        position: absolute;
        right: 0; top: 30px;
    }

    .u-vip-update{
        position: absolute;
        left: 0; top: 82px;
        color: #F5A623;
    }

    .u-pass-btn{
        position: absolute;
        line-height: 30px; text-align: center;
        width:60px;
        height:30px;
        background:rgba(2,187,0,1);
        border-radius:5px;
        color: #fff;
        bottom: 23px; right: 70px;
    }

    .u-refuse-btn{
       @extend .u-pass-btn;
       background: #F5A623; right: 0;
    }

    .u-btn-black{
        @extend .u-btn;
        color: #fff;
        background: #000;
    }

    .c-title{
        position: relative;
        height: 80px;
        background:rgba(242,242,242,1);
    }

    .u-vip-wrap{
        position: relative;
        width: 88.57142857142857%;
        margin: 0 auto;
    }

    .u-vip-title{
        height: 94px;
        line-height: 94px;
        text-align: center;
        border-bottom: 2px solid rgba(151,151,151,1);
        color:rgba(48,54,65,1);
        font-size:20px;
        margin-bottom: 28px;
        cursor: pointer;
    }

    .u-vip-item{
        position: relative;
        height:109px;
        box-shadow:0px 1px 2px 0px rgba(0,0,0,0.04);
        border-radius:3px;
        margin-bottom: 13px;
        background: #fff;
    }

    .u-vip-logo{
        position: absolute;
        width: 37px; height: 37px;
        left: 13px; top: 18px;
    }

    .u-invite-logo{
        position: absolute;
        width: 37px; height: 37px;
        left: 13px; top: 18px;
        border-radius: 50%;
        overflow: hidden;
    }

    .u-vip-dec{
        position: absolute;
        left: 62px; top: 18px;
        color:rgba(85,85,85,1);
        font-size:12px; line-height: 1;
    }

    .u-invite-dec{
        position: absolute;
        left: 62px; top: 18px;
        right: 20px;
        height: 32px;
        color:rgba(85,85,85,1);
        font-size:12px; line-height: 16px;
        text-align: left;
    }

    .u-vip-type{
        position: absolute;
        left: 62px; top: 33px;
        color:rgba(17,17,17,1);
        height:30px; line-height: 30px;
        font-size:22px;
    }

    .u-vip-price{
        position: absolute;
        left: 62px; bottom: 7px;
        color:rgba(136,136,136,1);
        font-size:12px; line-height: 1;
    }

    .u-vip-date{
        position: absolute;
        right: 14px; bottom: 7px;
        color:rgba(136,136,136,1);
        font-size:12px; line-height: 1;
    }

    .u-invite-date{
        margin: 16px 0 10px 0;
        text-align: center;
        color:rgba(136,136,136,1);
        height: 12px;
        font-size:12px; line-height: 1;
    }

    .u-detail-center{
        width: 71%; margin: 0 auto;
        flex: none;
        min-width: 850px;
    }

    .cursor{
        cursor: pointer;
    }

</style>

<template>
    <div class="frame-index">
        <div class="u-wrap">
            <div class="u-detail" :class="{'u-detail-center': !(showVipList || showInviteList)}">
                <div class="u-header">
                    <div class="u-name">{{userData.username}}</div>
                    <button class="u-btn" @click="addBlackList" v-if="userData.state!='black'">加入黑名单</button>
                    <button class="u-btn-black" @click="removeBlackList" v-if="userData.state=='black'">解除黑名单</button>
                </div>

                <div class="u-body">
                    <UheadItem :imgurl="userData.usericon"/>
                    <Uitem label="状态" :text="userstate" orange/>
                    <Uitem label="备注" :text="userData.comment">
                        <button slot="label" @click="updateCommom('comment')">修改</button>
                    </Uitem>
                    <Uitem label="装裱大师ID" :text="userData.userid"/>
                    <Uitem label="VIP期限至" :text="userData.viptime | viptime" v-if="vipList.length">
                        <button slot="label" v-if="canUpdateVIP" @click="updateCommom('vip')">修改</button>
                    </Uitem>
                    <!--<div class="u-item-block" v-else-if="vipList.length">-->
                        <!--<div class="u-item-label">VIP期限至</div>-->
                        <!--<div class="u-item-text">{{userData.viptime | viptime}}</div>-->
                        <!--<div class="u-vip-update">修改为 2018-08-09 12:33:56 等待财务授权</div>-->
                        <!--<button class="u-pass-btn">通过</button>-->
                        <!--<button class="u-refuse-btn">拒绝</button>-->
                    <!--</div>-->
                    <Uitem class="cursor" label="购买VIP记录" :text="vipList.length + '条'" green @click.native="showVipView"/>
                    <Uitem class="cursor" label="邀请有奖记录" :text="inviteList.list.length + '条'" green @click.native="showInviteView"/>
                    <Uitem label="最近登录：" :text="userData.createtime | registTime"/>
                    <Uitem label="绑定手机：" :text="userData.userphone"/>

                    <div class="u-block"><div class="u-regist">注册信息</div></div>
                    <Uitem label="注册方式" :text="regtype"/>
                    <Uitem label="微信昵称" :text="userData.username" v-if="userData.openid"/>
                    <Uitem label="注册日期" :text="userData.createtime | registTime"/>
                    <Uitem label="注册设备" :text="userData.deviceid"/>
                </div>
            </div>

            <div class="u-vip-box" v-if="showVipList && !showInviteList">
                <div class="u-vip-wrap">
                    <div class="u-vip-title">购买VIP记录</div>
                    <template>
                        <div class="u-vip-item" v-for="(item, key) in vipList" :key="key">
                            <img src="" class="u-vip-logo">
                            <div class="u-vip-dec">{{item.content}}</div>
                            <div class="u-vip-type">月会员</div>
                            <div class="u-vip-price">¥12</div>
                            <div class="u-vip-date">{{item.createtime | registTime}}</div>
                        </div>
                    </template>
                </div>
            </div>

            <div class="u-vip-box" v-if="showInviteList && !showVipList">
                <div class="u-vip-wrap">
                    <div class="u-vip-title">邀请有奖记录</div>
                    <template>
                        <div v-for="(item, key) in inviteList.list" :key="key">
                            <div class="u-invite-date">{{item.createtime | registTime}}</div>
                            <div class="u-vip-item" style="height:122px;">
                                <img src="" class="u-invite-logo">
                                <div class="u-invite-dec">{{item.content}}</div>
                                <div class="u-vip-type" style="top: 56px;">月会员</div>
                                <div class="u-vip-price">双方获得额外 {{item.buytime}} 天VIP</div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

        </div>

        <el-dialog
            title="提示"
            top="15%"
            append-to-body
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
            <el-input
                :placeholder="updateplaceholder"
                v-model="content"
                clearable>
            </el-input>

            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false;updatekey = ''">取 消</el-button>
                <el-button type="primary" @click="updateData">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {mapActions,mapState} from 'vuex'
    import UheadItem from '../../components/user/u-head-item.vue'
    import Uitem from '../../components/user/u-item.vue'
    export default {
        data () {
            return {
                showVipList: false,
                showInviteList: false,
                centerDialogVisible: false,
                content: '',
                updatekey: '',
                updateplaceholder: ''
            }
        },
      beforeRouteEnter(to, from, next) {
        next( (self) => {
          self.refresh()
        })
      },
        computed: {
            ...mapState({
                userData: state => state.user.userData,
                vipList: state => state.user.vipList,
                inviteList: state => state.user.inviteList
            }),
          canUpdateVIP() {
            if (this.$store.state.userInfo.auth.indexOf('viptime') > -1){
                return true
            }else{
                return false
            }
          },
          regtype (){
            if (this.userData.regtype == 'phone'){
              return '手机号'
            }else if(this.userData.regtype == 'tourist'){
              return '游客'
            }else if (this.userData.regtype == 'trdparty'){
              return '微信'
            }
          },
          userstate(){
            if (this.userData.state == 'enable'){
              return '正常'
            }else if(this.userData.state == 'disable'){
              return '修改VIP，等待授权'
            }else if (this.userData.state == 'black'){
              return '黑名单'
            }
          }
        },
        components: {
            UheadItem,
            Uitem
        },
        mounted () {
            this.$store.state.navTitle = '用户信息'
            this.getUserDetail(this.$route.query.id)
            this.getVipRecordList(this.$route.query.id)
            this.getInviteRecordList({userid: this.$route.query.id})
            .then(d => {
//                console.log(this.inviteList)
            })
        },
        methods: {
            ...mapActions([
                'getUserDetail',
                'getVipRecordList',
                'getInviteRecordList',
                'userBuyVIP',
                'updateUserDetail'
            ]),
            showVipView () {
                if (this.showInviteList) {
                    this.showInviteList = false
                }
                this.showVipList = !this.showVipList
                if (!this.showVipList) {
                    this.showInviteList = false
                }
            },
            showInviteView () {
                if (this.showVipList) {
                    this.showVipList = false
                }
                this.showInviteList = !this.showInviteList
                if (!this.showInviteList) {
                    this.showVipList = false
                }
            },
            updateData () {
                this.centerDialogVisible = false
              if (this.updatekey == 'comment'){
                var params = {
                  action: 'update',
                  userid: this.$route.query.id,
                  comment: this.content
                }
                this.updateUserDetail(params)
                  .then(data => {
                    this.getUserDetail(this.$route.query.id)
                  })
              }else if (this.updatekey == 'vip'){
                var params = {
                  action: 'update',
                  userid: this.$route.query.id,
                  viptime: String(Date.parse(this.content))
                }
                this.updateUserDetail(params)
                  .then(data => {
                    this.getUserDetail(this.$route.query.id)
                  })
              }

            },
            updateCommom (key) {
                if (key == 'comment'){
                  this.updateplaceholder = '请输入备注'
                }else if (key == 'vip'){
                  this.updateplaceholder = '输入vip期限，eg.2018-01-01 00:00:00'
                }
                this.centerDialogVisible = true
                this.content = ''
              this.updatekey = key
            },
            addBlackList () {
                this.$xalert.open({
                    title: '确定将' + this.userData.username  + '加入黑名单吗？',
                    btnColor: 'rgba(255,82,62,1)',
                    btnText: '加入黑名单',
                    success: () => {
//                        alert(document.body.offsetHeight)
                        this.$xalert.close()
                      var params = {
                        action: 'update',
                        userid: this.$route.query.id,
                        state: 'black'
                      }
                      this.updateUserDetail(params)
                        .then(data => {
                          this.getUserDetail(this.$route.query.id)
                        })
                    }
                })
            },
            removeBlackList () {
                this.$xalert.open({
                    title: '确定将' + this.userData.username  + '解除黑名单吗？',
                    btnColor: '#000',
                    btnText: '解除黑名单',
                    success: () => {
//                        alert(document.body.offsetHeight)
                        this.$xalert.close()
                      var params = {
                        action: 'update',
                        userid: this.$route.query.id,
                        state: 'enable'
                      }
                      this.updateUserDetail(params)
                        .then(data => {
                          this.getUserDetail(this.$route.query.id)
                        })
                    }
                })
            }

        },
        filters: {
            registTime (v) {
                if (v) {
                    return v.substring(0, 4) + '-' + v.substring(4, 6) + '-' + v.substring(6, 8) + ' ' + v.substring(8, 10) + ':' + v.substring(10, 12) + ':' + v.substring(12, 14)
                }
            },
            viptime (v) {
                if (v) {
                    return new Date(Math.floor(v)).format('YYMMDD hh:mm:ss')
                }
            }
        }
    }
</script>
